<template>
    <el-dialog
        class="dialog"
        title="选择租户"
        :visible.sync="isShow"
        :close-on-click-modal="false"
        append-to-body
        @close="onDialogClose"
    >
        <zb-header-search
            ref="searchHeader"
            :valueTransform="enquiryData.valueTransform"
            :rule="enquiryData.inputs"
            :btns="enquiryData.btns"
            :searchBtn="enquiryData.searchBtn"
            :isCheckPermissions="false"
            @search="onQueryClick"
        ></zb-header-search>
        <vxe-grid
            ref="xTable"
            v-bind="gridConfig"
            :data="tableList.data"
            :columns="tableList.column"
            :rowClassName="tableList.formatRowClass"
        >
            <template v-slot:operation="{ row }">
                <zb-btn-group :btns="tableList.btns" :data="row"></zb-btn-group>
            </template>
        </vxe-grid>
        <div class="pagination-el bh bend mt_10">
            <el-pagination
                @size-change="onSizeChange"
                @current-change="onCurrentChange"
                :current-page="tableList.pagination.curr"
                :page-sizes="gridConfig.pageSizes"
                :page-size="tableList.pagination.limit"
                :total="tableList.pagination.total"
                layout="total, sizes, prev, pager, next, jumper"
            ></el-pagination>
        </div>
        <dialogForm
            ref="dialogForm"
            @submitSuccess="onSubmitSuccessBefore"
            @closeDialog="onCloseDialog"
        ></dialogForm>
    </el-dialog>
</template>
<script lang="ts">
import { Component, Vue, Emit } from "vue-property-decorator";
import { Action, Getter } from "vuex-class";
import { mixinColumnGrid } from "@/mixin/ColumnGrid";
import { mixinViewDialog } from "@/mixin/view/Dialog";
import { isLettersNumbers } from "@/utils/valid";
import { mixinDialogFormParent } from "@/mixin/dialog/FormParent";
import dialogForm from "../user/Edit.vue";
import { defaultsDeep } from "lodash";
@Component({
    name: "RentContractSelect",
    mixins: [mixinColumnGrid, mixinViewDialog, mixinDialogFormParent],
    components: {
        dialogForm
    }
})
export default class RentContractSelect extends Vue {
    @Action("rentUser/list") gridList: any;

    @Getter("sharing/rentUserType") typeData: any;

    @Emit("select") select() {}
    // 列表配置
    gridConfig: any = {
        height: "300px"
    };
    // 查询头配置
    enquiryData: any = {
        btns: [
            {
                label: "新增",
                class: "btn-blue",
                handleClick: (this as any).onAddClick
            }
        ],
        inputs: [
            {
                type: "input",
                field: "tenant_name",
                title: "租户名称"
            },
            {
                type: "input",
                field: "certificate_num",
                title: "证件号码",
                validate: [
                    {
                        validator: isLettersNumbers
                    }
                ]
            }
        ]
    };

    transformList: any = [
        {
            dataName: "typeData",
            keyName: "tenant_type"
        }
    ];
    // 列表配置
    tableList: any = {
        column: [
            {
                title: "租户类型",
                field: "tenant_type_label",
                minWidth: 100
            },
            {
                title: "租户名称",
                field: "tenant_name",
                minWidth: 100
            },
            {
                title: "证件号码",
                field: "certificate_num",
                minWidth: 150
            },
            {
                title: "联系人",
                field: "contact_name",
                minWidth: 90
            },
            {
                title: "联系电话",
                field: "contact_tel",
                minWidth: 110
            },
            {
                showOverflow: "ellipsis",
                fixed: "right",
                title: "操作",
                slots: {
                    default: "operation"
                },
                headerAlign: "center",
                align: "left",
                width: 60
            }
        ],
        btns: [
            {
                label: "选择",
                handleClick: (this as any).onSelectClick
            }
        ],
        proxy: {
            requestFun: (this as any).gridList,
            disposeItem: (this as any).disposeItem
        }
    };

    onSelectClick(row: any) {
        const me = this as any;
        me.onDialogClose();
        me.select(row);
    }

    onSubmitSuccessBefore(t: any, { data, formData }: any) {
        const me = this as any;
        me.onSubmitSuccess(t);
        me.onSelectClick(defaultsDeep(data, formData));
    }
}
</script>
